<template>
    <div id="community" class="community">
        <mt-loadmore bottomLoadingText="" topDropText="Loading..." topLoadingText="" topPullText="" :top-method="loadTop"  :bottom-method="loadBottom"
                     :bottom-all-loaded="bottomAllLoaded" ref="loadmore" @bottom-status-change="handleBottomChange">
            <ul>
                <li v-for="article in articleList">
                    <router-link v-bind:to="'/community/' + article.id">
                        <dl>
                            <dt><img v-bind:src="article.cover"></dt>
                            <dd>
                                <h2>{{ article.title }}</h2>

                                <p>{{ article.summary }}</p>
                                <span>发布：{{article.created_at}}</span>
                                <span>阅读：{{ article.read_count }}</span>
                            </dd>
                        </dl>
                    </router-link>
                </li>
            </ul>
			<div slot="bottom" class="mint-loadmore-bottom">
				<span v-show="bottomStatus!=='loading'&&!bottomAllLoaded">Loading...</span>
				<span v-show="bottomAllLoaded==true">没有更多内容</span>
			</div>
        </mt-loadmore>
    </div>
</template>

<script type="text/javascript">
    import {Loadmore} from 'mint-ui';

    export default {

        data () {
            return {
                articleList: [],
                article_page: {},
                bottomAllLoaded: false,
                bottomStatus:''
            }
        },
        mounted: function () {
            this.getArticles(0);


        },
        methods: {
        	handleBottomChange(status){
        		this.bottomStatus = status;
        		console.log(this.bottomStatus);
        	},
            getArticles(page){
                this.$http.get(this.GLOBAL.serverAddr + '/articles' + '?page=' + page, {
                    headers: {
                        'Authorization': this.GLOBAL.authorization
                    },
                    emulateJSON: true
                }).then(function (response) {

                    this.article_page.cur_page = response.data.page.cur_page;
                    this.article_page.count_page = response.data.page.count_page;
                    this.article_page.page_size = response.data.page.page_size;

                    var list = response.data.data;
                    for (var i in list) {
                        list[i].created_at = this.GLOBAL.timeTrans(list[i].created_at);
                        this.articleList.push(list[i]);
                    }
                }, function (response) {
                    // 这里是处理错误的回调
                    console.log(response)
                });
            },
            loadBottom() {
                if (this.article_page.cur_page < this.article_page.count_page) {
                    this.getArticles(this.article_page.cur_page + 1);
                    
                } else {
                    //最后一页,解除加载触发事件
                    this.bottomAllLoaded = true;
                  
                    console.log("no more");

                }
                this.$refs.loadmore.onBottomLoaded();
            },
            loadTop() {
            	this.getArticles(0);
            	this.$refs.loadmore.onTopLoaded();
            }
        },
        components: {
            'mt-loadmore': Loadmore
        }
    }
</script>

<style>
</style>
